<template>
	<!-- 搜索导航组件 -->
	<u-sticky bgColor="#fff">
		<view class="searchheader-contaienr">
			<!-- 搜索区 -->
			<view class="mysearch">
				<slot name="back"></slot>
				<u-search :placeholder="placeholder" v-model="keyword" bgColor="#f1f1f1" :showAction="false"
					searchIconColor="#353535" @search="changeSearch"></u-search>
				<!-- 右侧图标插槽 -->
				<slot name="right"></slot>
			</view>
			<slot name="tabs"></slot>
		</view>
	</u-sticky>
</template>

<script>
	import {
		emit
	} from 'process'
	export default {
		data() {
			return {
				// 搜索值
				keyword: ''
			}
		},
		props: {
			placeholder: {
				type: String,
				required: true
			}
		},
		methods: {

			/**
			 * 搜索框值改变
			 * @param {string} value 具体输入的值
			 */
			changeSearch(value) {
				this.$emit('setSearchValue', value)
			},
		}
	}
</script>

<style lang="less" scoped>
	.searchheader-contaienr {
		width: 100%;
		min-height: 176rpx;
		background-color: #fff;
		padding: 98rpx 40rpx 0;
		box-sizing: border-box;

		.mysearch {
			width: 100%;
			display: flex;
			align-items: center;
		}
	}
</style>